﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Google AJAX Search API Application</title>
    <style type="text/css">
        .gsc-tabsArea
        {
            display: none;
        }
        .gsc-resultsHeader
        {
            display:none;
        }
    </style>

    <script src="http://www.google.com/jsapi?key=ABQIAAAAQmdVBfFZ7fLDyLOGAIobhRRi0d308UOccQAk12aisTPLB5NJ9BSkqFl3vZ1tq09phFCY0ZgMOw1zJQ"
        type="text/javascript"></script>

    <script type="text/javascript">
    //<![CDATA[
    
    google.load('search', '1.0');

    var searchControl = null;
    cse = function(){
         // Create a search control
      searchControl = new google.search.SearchControl();

      searchControl.addSearcher(new google.search.WebSearch());
     
      var drawOptions = new google.search.DrawOptions();
      drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
      drawOptions.setInput(document.getElementById("txtGSearch"));
      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"),drawOptions);

      // execute an inital search
      //searchControl.execute("VW GTI");
      
    };
    function OnLoad() {
      new cse();
    }
    google.setOnLoadCallback(OnLoad, true);

    GoogleSearch = function(){
        var q = document.getElementById("txtSearch").value;
            if (q && q!= "") {
              searchControl.execute(q);
            }
    }
    
   
    //]]>
    </script>

</head>
<body>
    <input type="text" id="txtGSearch" style="display: none;" /><input type="text" id="txtSearch" /><input
        type="button" id="btnSearch" value="Search" onclick="GoogleSearch();" />
    <div id="searchcontrol">
        Loading</div>
</body>
</html>
